<!doctype>
<html>
	<head>
		<title>All the Foods! - Fish Tacos</title>
		<meta name="robots" content="noarchive, noindex, nofollow">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link rel="stylesheet" href="css/styles.min.css">
	</head>
	<body>
		<header>
			<section id="innerHeader">
				<img src="img/logo.svg" alt="AllTheFoods" id="logo">
				<nav>
					<section id="navIcon">
						<div></div>
						<div></div>
						<div></div>
					</section>
					<section class="nav">
						<a href="#" class="navItem">Recipes</a>
						<a href="#" class="navItem">Articles</a>
						<a href="#" class="navItem">About</a>
						<a href="#" class="navItem">Contact</a>
					</section>
				</nav>
			</section>
		</header>
		<ul class="destinations">
			<li class="destination"><a href="#">Ten Minute Dinners</a></li>
			<li class="destination"><a href="#">Dinner Party Hits</a></li>
			<li class="destination"><a href="#">Awesome Grilling Recipes</a></li>
			<li class="destination"><a href="#">Healthy Lunches</a></li>
			<li class="destination"><a href="#">Light Breakfasts</a></li>
			<li class="destination"><a href="#">Holiday Dinner Guides</a></li>
			<li class="destination"><a href="#">Pathetic Cakes</a></li>
		</ul>
		<div id="content">
			<div id="mainColumn">
				<h1 class="recipeName">Fish Tacos</h1>
				<img src="img/recipe.jpg" alt="Fish Tacos" id="masthead">
				<section class="recipeDetails">
					<ul class="attributes">
						<li class="attribute">
							<span>15 min</span>
							prep
						</li>
						<li class="attribute">
							<span>45 min</span>
							total
						</li>
						<li class="attribute">
							<span>11</span>
							ingredients
						</li>
					</ul>
					<ul class="actions">
						<li class="action pinterest"><a href="#"></a></li>
						<li class="action facebook"><a href="#"></a></li>
						<li class="action twitter"><a href="#"></a></li>
						<li class="action googlePlus"><a href="#"></a></li>
					</ul>
				</section>
				<p class="description">These fish tacos are the hit of any dinner party! Tomatoes, white onion, garlic, habanero, cilantro, lime and talapia make this a very simple, but tasty dish.</p>
				<section class="ingredientSteps">
					<h2 class="sectionHeader">Ingredients</h2>
					<ul class="ingredientList">
						<li>
							<b>4</b> tomatoes
						</li>
						<li>
							<b>1/4</b> lime
						</li>
						<li>
							<b>1/2</b> white onion
						</li>
						<li>
							<b>1</b> bunch of cilantro
						</li>
						<li>
							<b>1</b> clove of garlic
						</li>
						<li>
							<b>1</b> habanero
						</li>
						<li>
							<b>6</b> flour tortillas
						</li>
						<li>
							<b>1</b> pinch of salt
						</li>
						<li>
							<b>1</b> teaspoon of olive oil
						</li>
					</ul>
					<img src="img/ad_3.jpg" alt="Placecage to the Rescue" class="ad">
					<h2 class="sectionHeader">Steps</h2>
					<ul class="stepList">
						<li class="step">
							<h3>Step 1</h3>
							<p>Dice the tomatoes, garlic, and the half white onion and discard the pulpy insides. Place the diced pieces into a bowl for mixing.</p>
						</li>
						<li class="step">
							<h3>Step 2</h3>
							<p>Squeeze the lime and add the salt over the diced tomatoes, garlic and onions.</p>
						</li>
						<li class="step">
							<h3>Step 3</h3>
							<p>Chop up the habanero and dice up the cilantro and add it to the pico. Mix everything together with a spoon.</p>
						</li>
						<li class="step">
							<h3>Step 4</h3>
							<p>Add the olive oil to a skillet. Dice up the fish and fry it in a skillet until slightly browned.</p>
						</li>
						<li class="step">
							<h3>Step 5</h3>
							<p>When the fish is cooked, warm up the tortillas in either a large skillet or a pan in the oven at 250 degrees.</p>
						</li>
						<li class="step">
							<h3>Step 6</h3>
							<p>Add the pico mixture and fish to the tortillas. Serve with a lime wedge and enjoy!</p>
						</li>
					</ul>
				</section>
				<section class="expandable">
					<h2 class="sectionHeader">Nutrition</h2>
					<div class="content">
						<ul class="nutrition">
							<li class="nutritionItem">
								<b>Serving size</b>
								<p>1 taco</p>
							</li>
							<li class="nutritionItem">
								<b>Protein</b>
								<p>2g</p>
							</li>
							<li class="nutritionItem">
								<b>Saturated fat</b>
								<p>1g</p>
							</li>
							<li class="nutritionItem">
								<b>Unsaturated fat</b>
								<p>2g</p>
							</li>
							<li class="nutritionItem">
								<b>Protein</b>
								<p>2g</p>
							</li>
							<li class="nutritionItem">
								<b>Calories</b>
								<p>125</p>
							</li>
						</ul>
					</div>
				</section>
				<section id="reviews">
					<h2 class="sectionHeader">Reviews</h2>
					<div class="review">
						<p class="reviewTitle">This was good!</p>
						<p class="author">by <a href="#">barfcaptain</a></p>
						<div class="rating">
							Rating:
							<span class="star on"></span>
							<span class="star on"></span>
							<span class="star on"></span>
							<span class="star on"></span>
							<span class="star"></span>
						</div>
						<p class="reviewBody">This wasn't too bad. It took some effort to slice up the tomates and stuff, but the rest of it was pretty effortless. I'd eat it again.</p>
					</div>
					<div class="review">
						<p class="reviewTitle">I'LL EAT ANYTHING</p>
						<p class="author">by <a href="#">food_lord</a></p>
						<div class="rating">
							Rating:
							<span class="star on"></span>
							<span class="star on"></span>
							<span class="star on"></span>
							<span class="star on"></span>
							<span class="star on"></span>
						</div>
						<p class="reviewBody">MAN I DONT CAER THIS IS FOOD SO I'LL EAT IT IT WAS GOOD 5/5 WOULD EAT AGAIN</p>
					</div>
					<div class="review">
						<p class="reviewTitle">I lost a foot to this</p>
						<p class="author">by <a href="#">diabeaten</a></p>
						<div class="rating">
							Rating:
							<span class="star on"></span>
							<span class="star"></span>
							<span class="star"></span>
							<span class="star"></span>
							<span class="star"></span>
						</div>
						<p class="reviewBody">this dish was NOT very good... lost a foot to it and that had NOTHING TO DO WITH THE FIVE ECLAIRS I ATE B4 THIS</p>
					</div>
				</section>
			</div>
			<aside>
				<h2 class="sectionHeader">You Might Like...</h2>
				<ul class="contentList">
					<li class="contentItem">
						<a href="#">
							<img class="contentImage" src="img/content_burrito.jpg" alt="Beef Burrito">
							<p class="contentDescription">Beef Burrito</p>
						</a>
					</li>
					<li class="contentItem">
						<a href="#">
							<img class="contentImage" src="img/content_ceviche.jpg" alt="Seafood Ceviche">
							<p class="contentDescription">Seafood Ceviche</p>
						</a>
					</li>
					<li class="contentItem">
						<a href="#">
							<img class="contentImage" src="img/content_empanadas.jpg" alt="Beef Empanadas">
							<p class="contentDescription">Beef Empanadas</p>
						</a>
					</li>
					<li class="contentItem">
						<a href="#">
							<img class="contentImage" src="img/content_pico.jpg" alt="Pico de Gallo">
							<p class="contentDescription">Pico de Gallo</p>
						</a>
					</li>
					<li class="contentItem">
						<a href="#">
							<img class="contentImage" src="img/content_salsa_verde.jpg" alt="Salsa Verde">
							<p class="contentDescription">Salsa Verde</p>
						</a>
					</li>
					<li class="contentItem">
						<a href="#">
							<img class="contentImage" src="img/content_tostada.jpg" alt="Tostadas">
							<p class="contentDescription">Tostadas</p>
						</a>
					</li>
				</ul>
				<img src="img/ad_1.jpg" alt="Placecage to the Rescue" class="ad">
				<h2 class="sectionHeader">Enjoy These Pathetic Cakes</h2>
				<ul class="contentList">
					<li class="collectionItem">
						<img class="collectionImage" src="img/cake_1.jpg" alt="This is a bad one.">
						<p class="collectionCopy">
							<b>Crater Cake</b>
							This cake is so bad that it gave up on itself.
							<a href="#">Bake This Failure Today &raquo;</a>
						</p>
					</li>
					<li class="collectionItem">
						<img class="collectionImage" src="img/cake_2.jpg" alt="I don't even want to expend the effort to feel terrible for this.">
						<p class="collectionCopy">
							<b>We Weren't Even Trying</b>
							You could do this in your sleep.
							<a href="#">Give This One The Ol' College Try &raquo;</a>
						</p>
					</li>
					<li class="collectionItem">
						<img class="collectionImage" src="img/cake_3.jpg" alt="Meh.">
						<p class="collectionCopy">
							<b>Honesty Cake</b>
							Honesty is a virtue, even when you bake a nakedly honest cake.
							<a href="#">Bake This With No Regrets &raquo;</a>
						</p>
					</li>
					<li class="collectionItem">
						<img class="collectionImage" src="img/cake_4.jpg" alt="I don't even want to expend the effort to feel terrible for this.">
						<p class="collectionCopy">
							<b>My God, What Have We Done?</b>
							Look what our careless hands have wrought. We are the architects of our own destruction.
							<a href="#">Make a Sandwich Instead &raquo;</a>
						</p>
					</li>
				</ul>
				<img src="img/ad_2.jpg" alt="Placecage to the Rescue" class="ad">
				<section class="featuredRecipe">
					<h2 class="sectionHeader">Featured Recipe</h2>
					<img src="img/featured_recipe.jpg" alt="The Melange">
					<p class="description">
						How did this come to be? Abandon all hope, ye who embark on this neon hillock of sustenance.<br>
						<a href="#">Proceed With Trepidation &raquo;</a>
					</p>
				</section>
			</aside>
		</div>
		<footer>
			<p class="footerText">&copy; 2016 AllTheFoods!</p>
		</footer>
		<script src="js/scripts.min.js"></script>
	</body>
</html>